<template>
	<div class="flex_row">
		<div class="flex_col">
			<label class="flex_center_self" style="font-size: large;">项目列表</label>
			<div class="flex_col card m5 p10" v-for="(item, index) in pros" :key="index">
				<label class="flex_center_self">{{ item.name }}</label>
				<div class="flex_row mt5">
					<el-button @click="onClickDel(item.id)" type="warning">删除</el-button>
					<el-button @click="onClickDetail(item)" type="primary">查看固件</el-button>
				</div>
			</div>
		</div>
		<div style="width: 2px; background-color: black; margin-left: 10px; margin-right: 10px;"></div>
		<div class="flex_col flex_start_self card m5 p10">
			<label style="font-size: large;" class="flex_center_self">创建新项目</label>
			<div class="flex_row_center mt5">
				<label>名称:</label>
				<el-input v-model="pro.name" style="width: 300px;"/>
			</div>
			<div class="flex_row_center mt5">
				<label>描述:</label>
				<el-input v-model="pro.description" type="textarea" style="width: 300px;"/>
			</div>
			<el-button @click="onClickCreate" type="primary" class="mt5 flex_center_self">新建</el-button>
		</div>
	</div>
</template>

<script setup lang="ts">
import router from '@/router';
import { createPro, deletePro } from '@/utils/http';
import type { Pro } from '@/utils/model';
import { pros, selectPro, updatePro } from '@/utils/react';
import { runAction } from '@/utils/ui';
import { reactive } from 'vue';


interface ProCtx {
	name: string,
	description: string,
}

const pro = reactive<ProCtx>({
	name: '',
	description: ''
});

async function onClickCreate() {
	await runAction('新建', '新建项目', async ()=> {
		if (pro.name.length == 0) {
			throw '请输入名称';
		}
		if (pro.description.length == 0) {
			throw '请输入描述';
		}
		await createPro(pro.name, pro.description);
		await updatePro();
	});
}

async function onClickDel(id: number) {
	await runAction('删除', '删除项目', async () => {
		await deletePro(id);
		await updatePro();
	});
}

async function onClickDetail(pro: Pro) {
	selectPro.value = pro
	await router.push('/hex');
}

updatePro();

</script>
